<template>
	<div>
		<div class="pb10px">
			<el-input v-model="searchForm.username" @input="handleSearch" class="input" clearable placeholder="请输入用户名称">
			</el-input>
			<el-button type="primary" icon="el-icon-search" class="mr10px" @click="handleSearch">搜索</el-button>
			<el-button v-if="isAdmin" type="primary" @click="handleAdd">新增</el-button>
			<el-button v-if="isAdmin" type="success" @click="downloadText" icon="el-icon-download">下载模板</el-button>
			<el-button v-if="isAdmin" type="primary" @click="dialogTableVisible = true">批量导入</el-button>
			<el-button v-if="isAdmin" type="danger" size="small" @click="batchDelete" :disabled="ids.length<=0">批量删除
			</el-button>
		</div>
		<el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="width: 100%"
			@selection-change="handleSelectionChange" :header-cell-style="headClass" :cell-style="rowClass">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="ID" width="50"></el-table-column>
			<el-table-column prop="username" label="用户名称"></el-table-column>
			<el-table-column label="用户头像">
				<template slot-scope="scope">
					<el-image style="width: 50px; height: 50px" :src="scope.row.img"
						:preview-src-list="[scope.row.img]"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="content" label="个人简介" show-overflow-tooltip></el-table-column>
			<el-table-column prop="email" label="邮箱" width="100"></el-table-column>
			<el-table-column prop="mobile" label="电话"></el-table-column>
			<el-table-column prop="address" label="地址" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="gender" label="性别"></el-table-column>
			<el-table-column prop="roleType" label="角色类型"></el-table-column>
			<el-table-column prop="state" label="状态">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.state==='启用'">启用</el-tag>
					<el-tag type="danger" v-if="scope.row.state==='禁用'">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300" fixed="right">
				<template slot-scope="scope">
					<el-button v-if="isAdmin" icon="el-icon-edit-outline" @click="handleEdit(scope.$index, scope.row)">
						编辑</el-button>
					<el-button v-if="isAdmin" icon="el-icon-remove-outline" type="danger"
						@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					<el-button v-if="isAdmin" icon="el-icon-edit-outline" @click="resetPassword(scope.row)">密码重置
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--自定义分页组件-->
		<custom-pages @current-change="currentChange" @size-change="sizeChange" :total="pageInfo.total"
			:page-size="pageInfo.pageSize" :current-page="pageInfo.pageNum">
		</custom-pages>
		<!--自定义分页组件-->

		<!--自定义抽屉组件-->
		<custom-drawer :form-data="formData" :rules-form="ruleForm" @close-drawer="closeDrawer"
			@submit-drawer="submitDrawer" :is-drawer-dialog="isDrawerDialog">
			<div slot="content">
				<el-form-item label="用户头像" prop="img">
					<el-upload class="avatar-uploader" :action="$httpUploadFile" :show-file-list="false"
						:on-success="uploadImgSuccess">
						<img v-if="formData.img" :src="formData.img" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="用户名称" prop="username">
					<el-input v-model="formData.username" placeholder="用户名称" :disabled="formData.id"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="formData.password" placeholder="密码" type="password"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="formData.email" placeholder="邮箱"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="mobile">
					<el-input v-model="formData.mobile" placeholder="电话"></el-input>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="formData.address" placeholder="地址"></el-input>
				</el-form-item>
				<el-form-item label="角色类型" prop="roleType">
					<el-select v-model="formData.roleType" placeholder="请选择">
						<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.role">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="formData.gender">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<el-radio-group v-model="formData.state">
						<el-radio label="启用"></el-radio>
						<el-radio label="禁用"></el-radio>
					</el-radio-group>
				</el-form-item>
			</div>
		</custom-drawer>
		<!--自定义抽屉组件-->
		<el-dialog title="批量导入" :visible.sync="dialogTableVisible">
			<el-upload ref="upload" class="upload-demo" :auto-upload="false" :on-change="handleChange"
				:before-upload="beforeUpload" :http-request="handleHttpRequest" accept=".xlsx, .xls">
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件
				</el-button>
				<div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
				<div slot="tip" class="el-upload__tip" style="color: red;">*批量导入用户默认密码：123456</div>
			</el-upload>
		</el-dialog>
	</div>
</template>

<script>
	import mixins from "@/mixins/mixins"
	import utils from "@/utils/utils";

	export default {
		data() {
			return {
				api: {
					pageUrl: "/sysUser/page",
					addUrl: "/sysUser/add",
					updateUrl: "/sysUser/update",
					delUrl: "/sysUser/delBatch"
				},
				ruleForm: {
					username: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
				},
				formData: {},
				dialogTableVisible: false,
				searchForm: {
					username: ""
				},
				roleList: [],
				value: '',
				isAdmin: utils.isAdmin()
			}
		},
		mixins: [mixins],
		created() {
			this.getRoleList()
		},
		methods: {
			getRoleList() {
				this.$axios.get("/sysRole/list").then(res => {
					this.roleList = res.data
				})
			},
			getUserList() {
				this.$axios.get("/sysUser/page").then(res => {
					this.listData = res.data.list
				})
			},
			handleChange(file, fileList) {
				// 处理文件选择后的逻辑
			},
			beforeUpload(file) {
				const isExcel =
					file.type ===
					'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
					file.type === 'application/vnd.ms-excel';
				if (!isExcel) {
					this.$message.error('上传文件只能是 Excel 格式!');
					return false; // 阻止上传
				}
				return true; // 允许上传
			},
			handleHttpRequest(file) {
				console.log(file.file)
				// 这里实现自定义的上传逻辑
				// 例如，使用 axios 发送 POST 请求到服务器
				const formData = new FormData();
				formData.append('file', file.file);
				this.$axios.post('/sysUser/importUser', formData).then(res => {
					// 处理上传成功的逻辑
					this.$message.success('上传成功!');
					console.log('上传',res)
					this.getUserList()
					
					this.dialogTableVisible = false
				}).catch(error => {
					// 处理上传失败的逻辑
					this.$message.error('上传失败!');
				});
			},
			// submitUpload() {
			// 	this.$refs.upload.uploadFiles.forEach(file => {
			// 		// 调用 handleHttpRequest 方法进行上传
			// 		this.handleHttpRequest(file);
			// 	});
			// },
			headClass() { //表头居中显示
				return "text-align:center;font-size:14px;"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center;font-size:13px;"
			},
			resetPassword(row) {
				this.$axios.put("/sysUser/resetPassword", row).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.isDrawerDialog = false
						this.$message({
							message: res.msg,
							type: 'success'
						});
					}
				})
			},
			uploadImgSuccess(res) {
				this.$set(this.formData, "img", res.data.url)
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			// downloadText(){
			// 	this.$axios.post("/sysUser/downloadExc").then(res => {
			// 		console.log(res)
			// 	})
			// },
			downloadText() {
				var a = document.createElement('a')
				a.href = 'http://localhost:8080/sysuer.xlsx'
				console.log(a.href)
				a.download = '导入模板.xlsx'
				a.style.display = 'none'
				document.body.appendChild(a)
				a.click()
				a.remove()

			},
		}
	};
</script>

<style scoped>
	.avatar-uploader {
		text-align: center;
		padding-bottom: 10px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		border: 1px solid #ccc;
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
	}

	.avatar {
		width: 150px;
		height: 150px;
		display: block;
	}
</style>
